<template>
  <div>
    <div style="width: 100%;padding-left: 20px;padding-top: 15px;color: #3ea0f1;font-size: 14px">
      <span id="span-right">
        病理类型：
        <el-select v-model="pathologyid" class="m-2" placeholder="请选择病理类型" style="width: 7%">
          <el-option
              key="0"
              label="全部"
              value="0"
          />
          <el-option
              v-for="item in pathologys"
              :key="item.id"
              :label="item.pathology"
              :value="item.id"
          />
        </el-select>
      </span>

      <span id="span-right">
        申请医院：
        <el-select v-model="hospitalId" class="m-2" placeholder="请选择申请医院" style="width:12%"
                   @change="getCountHospital">
          <el-option
              v-for="item in hospitals"
              :key="item.id"
              :label="item.name"
              :value="[item.name]"
          />
        </el-select>
      </span>

      <span id="span-right">
        病理号：
        <el-input v-model="caseNo" style="width: 8%"/>
      </span>

      <span id="span-right">
        病人姓名：
        <el-input v-model="name" style="width: 8%"/>
      </span>

      <span id="span-right">
        <el-button type="primary" icon="Search" @click="getTbd">搜索病例</el-button>
      </span>

    </div>

    <hr>

    <div>
      <el-table
          :data="tbd.list"
          style="width: 100%"
          v-loading="loading"
          @selection-change="handleSelectionChange"
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ 'text-align': 'center' }"
          stripe
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column property="id" label="会诊编号" width="140"/>
        <el-table-column property="caseNo" label="病理号" width="140"/>
        <el-table-column property="name" label="病人姓名" width="130"/>
        <el-table-column property="pathology" label="病理类型" width="130"/>
        <el-table-column property="sendHospital" label="送检医院" width="250"/>
        <el-table-column prop="application_date" label="申请时间" sortable width="155">
          <template #default="scope">
            <span>{{ parseTime(scope.row.application_date) }}</span>
          </template>
        </el-table-column>
        <el-table-column property="expertName" label="意向专家" width="130"/>
        <el-table-column property="status" label="会诊状态" width="130">
          <template #default="{row}">
            <span v-if="row.status == 7" style="color: orange">诊断中</span>
            <span v-if="row.status == 8" style="color: green">已发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" icon="ZoomIn" link size="small" @click="check(scope)">查看</el-button>
            <el-button type="primary" icon="RefreshRight" link size="small" @click="changeDialogStatus(scope)" v-if="scope.row.status == 7">重新分配</el-button>
            <el-button type="primary" icon="TopRight" link size="small" @click="getCountCase(scope)" v-if="scope.row.status == 7">转诊</el-button>
          </template>

        </el-table-column>
      </el-table>
      <div style="width: 100%;margin-top: 5px;border-bottom: 2px #EBEEF4 solid;position: fixed;left: 0;bottom: 0">
        <el-pagination
            style="display:flex;justify-content: center; align-items:center;padding-bottom: 5px"
            v-model:current-page="pages.pageNum"
            v-model:page-size="pages.pageSize"
            :page-sizes="[10, 19]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tbd.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>

      <el-dialog
          v-model="dialogVisible"
          title="提示"
          width="30%"
      >
        <span v-if="dialogStatus == 0">确定要转诊吗？</span>
        <span v-if="dialogStatus == 1">确定要重新分配吗？</span>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"  v-if="dialogStatus == 0">
          确定
        </el-button>
        <el-button type="primary" @click="definiteAllocation" v-if="dialogStatus == 1">
          确定
        </el-button>
      </span>
        </template>
      </el-dialog>

      <el-dialog v-model="outerVisible" :title="'病理号：'+caseInfo.caseNo+'【已分诊】'" style="width: 88%;float: right">
        <el-tabs type="border-card">
          <el-tab-pane label="切片">
            <div style="width: 100%">
              <div style="width: 15%;float: left">
                <div v-for="(value,key,index) in slideMap" :key="key">
                  <div v-for="(item) in 1" @click="switchingPacket(index)"
                       style="width: 99%;height: 90px;background-color: #EDEDED;border-radius: 8px;border: 2px #D2DBE4 solid;text-align: center">
                    <el-image v-for="(value,item) in value"
                              style="width: 80px; height: 80px;margin-right: 5px;margin-top: 2.5px"
                              :src="'/src/assets'+value.content" fit="fit"/>
                  </div>
                  <div style="width: 99%;height: 40px; line-height: 40px;text-align: center">{{ key }}</div>
                </div>
              </div>

              <div
                  style="width: 60%;border: 2px #D2DBE4 solid;float: left;border-bottom: 0;border-right: 0;overflow: auto"
                  @wheel="wheel">
                <div
                    style="width: 40px; height: 200px; position: absolute; bottom: 0; left: 0; margin-bottom: 80px;margin-left: 240px;z-index: 999;">
                  <el-slider v-model="scale.value" :min="0.1" :max="10" :step="0.1" vertical height="200px"/>
                </div>

                <div
                    style="width: 322px; height: 100px; position: absolute; bottom: 0; right: 0; margin-bottom: 70px;margin-right: 370px;z-index: 999">
                  <div style="width: 100px;height: 40px;margin: 0 auto;">
                    <el-button class="el-button--transparent" icon="ArrowUpBold" @click="sliceGrouping(0)"></el-button>
                  </div>
                  <div style="width: 322px;height: 40px;margin-top: 10px;">
                    <div style="width: 100px;height: 40px;margin: 0 auto;float: left;margin-right: 10px">
                      <el-button class="el-button--transparent" icon="ArrowLeftBold"
                                 @click="switchingSlice(0)"></el-button>
                    </div>
                    <div style="width: 100px;height: 40px;margin: 0 auto;float: left;margin-right: 10px"
                         @click="sliceGrouping(1)">
                      <el-button class="el-button--transparent" icon="ArrowDownBold"></el-button>
                    </div>
                    <div style="width: 100px;height: 40px;margin: 0 auto;float: left">
                      <el-button class="el-button--transparent" icon="ArrowRightBold"
                                 @click="switchingSlice(1)"></el-button>
                    </div>
                  </div>
                </div>
                <el-image
                    :style="{ width: '100%', height: '510px', transform: 'scale(' + scale.value + ') translate(' + scale.offsetX + 'px, ' + scale.offsetY + 'px)' }"
                    z-index="999" :src="'/src/assets'+contentUrl" fit="fit"/>
              </div>
              <div style="width: 25%;border: 2px #D2DBE4 solid;float: left;border-bottom: 0;color: black">
                <div style="width: 100%;height: 500px;">
                  <p style="padding-left: 10px">病人姓名：{{ caseInfo.name }}</p>
                  <p style="padding-left: 10px">会诊编号：{{ caseInfo.id }}</p>
                  <p style="padding-left: 10px">病理号：{{ caseInfo.caseNo }}</p>
                  <p style="padding-left: 10px">申请时间：{{ parseTime(caseInfo.application_date) }}</p>
                  <p style="padding-left: 10px">婚姻状况：
                    <span v-if="caseInfo.maritalStatus == 0">未婚</span>
                    <span v-if="caseInfo.maritalStatus == 1">已婚</span>
                    <span v-if="caseInfo.maritalStatus == 2">离异</span>
                  </p>
                  <p style="padding-left: 10px">民族：{{ caseInfo.nation }}</p>
                  <p style="padding-left: 10px">送检医院：{{ caseInfo.sendHospital }}</p>
                  <p style="padding-left: 10px">取材部位：{{ caseInfo.specimen }}</p>
                  <p style="padding-left: 10px">临床诊断：{{ caseInfo.clinicalDiagnosis }}</p>
                  <p style="padding-left: 10px">大体所见：{{ caseInfo.grossDescript }}</p>
                  <p style="padding-left: 10px">原病理诊断：{{ caseInfo.firstDiagnosis }}</p>
                  <p style="width: 100%;border: #EBEBEB 2px solid;height: 5px;background-color: #FDFDFD"></p>
                </div>
              </div>
              <div class="dialog-footer"
                   style="float: right;margin-bottom: 0;width: 100%;text-align: right;background-color: #EFF3F8;height: 50px;line-height: 50px;padding-right: 20px">
                <el-button type="primary" @click="getCountCase(caseInfo)">重新分配</el-button>
                <el-button type="primary" @click="changeDialogStatus(caseInfo)">转诊</el-button>
                <el-button type="danger" @click="outerVisible = false">关闭窗口</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="附件">Config</el-tab-pane>
          <el-tab-pane label="留言">Role</el-tab-pane>
          <el-tab-pane label="报告">Task</el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>

  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import * as triage from '@/api/triage/triage'
import { ElMessage } from 'element-plus'
import * as frozen from "@/api/frozen/frozen";
//当前选中病理类型id
let pathologyid = ref('0')

let pathologys = ref([])

let caseNo = ref(null)

let name = ref(null)

//当前选中申请医院id
let hospitalId = ref('')

let countHospital = ref(null)

let hospitals = ref([])

const tbd = ref([])

const loading = ref(true)

let pages = ref({})

let caseList = ref([])

let dialogStatus = ref()

const dialogVisible = ref(false)

const returnSiteId = ref()

const outerVisible = ref(false)

//当前病人信息
const caseInfo = ref({})

//所有切片
const slideMap = ref(new Map())

//所有切片
const slideList = ref([])

//默认显示第1张切片
const countIndex = ref(0)

//默认显示第1组切片集合
const countListIndex = ref(0)

//当前要展示的切片分组
const countSlides = ref([])

//当前显示的大图
const contentUrl = ref('')

//滑块缩放图片
const scale = ref({
  value: 1,
  offsetX: 0,
  offsetY: 0,
  isDragging: false,
  startX: 0,
  startY: 0
})

/**
 * 批量分配
 * @param val当前选中行数据
 */
let handleSelectionChange = (val) => {
  let list = [];
  val.forEach((val)=>{
    list.push(val.id)
  })
  caseList.value = list;
}

/**
 * 修改dialog弹窗为"退回"
 * @param row
 */
function changeDialogStatus(row){
  dialogStatus.value = 1
  dialogVisible.value = true
  if (row.row == null && row.id != null){
    returnSiteId.value = row.id;
  }else if (row.id == null && row.row != null){
    returnSiteId.value = row.row.id;
  }
}

function returnSite(){
  triage.returnSite(returnSiteId.value).then(res => {
    tableSuccessTips(res);
    dialogVisible.value = false;
  })
}

const handleSizeChange = (val) => {
  pages.value.pageSize = val;
  getTbd(pages.value.pageNum, pages.value.pageSize)
}

const handleCurrentChange = (val) => {
  pages.value.pageNum = val;
  getTbd(pages.value.pageNum, pages.value.pageSize)
}


function getCountHospital(e) {
  let [name] = e;
  countHospital.value = name;
}

/**
 * 获取病理类型
 */
function getPathology() {
  triage.getPathology().then(res => {
    pathologys.value = res.data;
  })
}

function getApplayForHospital() {
  triage.getApplayForHospital().then(res => {
    hospitals.value = res.data;
  })
}

function getTbd() {
  triage.getTbd(7, parseInt(pathologyid.value), countHospital.value, caseNo.value, name.value, pages.value.pageNum, pages.value.pageSize).then(res => {
    tbd.value = res.data;
    pages.value.pageNum = res.data.pageNum
    pages.value.pageSize = res.data.pageSize
    pages.value.size = res.data.size
    loading.value = false;
  })
}

/**
 * 修改dialog弹窗为分配
 * @param row
 */
function getCountCase(row) {
  caseList.value = []
  dialogStatus.value = 0
  dialogVisible.value = true
  if (row.row == null && row.id != null){
    console.log("查看 -> 分配")
    caseList.value.push(row.id)
  }else if (row.id == null && row.row != null){
    console.log("分配")
    caseList.value.push(row.row.id)
  }
  console.log(caseList.value)
}

/**
 * 查看
 * @param row
 */
function check(row) {
  //初始化切片集合....
  contentUrl.value = ''
  slideMap.value = null
  countSlides.value = []
  slideList.value = []

  //打开查看dialog
  outerVisible.value = true
  //当前查看的病人信息
  caseInfo.value = row.row;
  //病人ID
  let caseNo = caseInfo.value.id;
  /**
   * 根据病人ID获取切片信息
   */
  frozen.getSlides(caseNo).then(res => {
    slideMap.value = res.data
    //将该病人所有切片遍历到集合中
    for (var key in slideMap.value) {
      slideList.value.push(slideMap.value[key])
    }
    //打开dialog默认先显示第一个分组
    countSlides.value = slideList.value[0];
    //默认显示第一个分组中的第一张切片
    contentUrl.value = countSlides.value[0].content
  })

  /**
   * 获取切片病人信息
   */
  triage.getDiagnosticReport(caseInfo.value.id).then(res => {
    caseInfo.value = res.data
  })
}

/**
 * 切换当前查看的切片分组
 * @param index 当前点击的切片分组的索引
 */
function switchingPacket(index) {
  //每次切换切片分组都默认显示第一张切片
  countIndex.value = 0;
  //给当前切片分组重新赋值
  countListIndex.value = index
  //将当前查看的切片集合切换成刚刚点击的切片集合
  countSlides.value = slideList.value[index]
  //将默认展示的切片修改为当前切片集合的第一张切片
  contentUrl.value = countSlides.value[countIndex.value].content
}

/**
 * 切片换组
 * @param status
 */
function sliceGrouping(status) {
  let count = 0;
  if (status == 0) { //上一组
    if (countListIndex.value + 1 > 1) {
      count = countListIndex.value - 1;
    }
  } else if (status == 1) { //下一组
    if (countListIndex.value + 1 < slideList.value.length) {
      count = countListIndex.value + 1;
    }
  }
  countSlides.value = slideList.value[count]
  contentUrl.value = countSlides.value[0].content
  countIndex.value = 0
}

function switchingSlice(status) {
  if (status == 0) { //切换为上一张切片
    if (countIndex.value + 1 > 1) {
      countIndex.value--;
      contentUrl.value = countSlides.value[countIndex.value].content;
      console.log(contentUrl.value)
    }
  } else if (status == 1) { //切换为下一张切片
    if (countIndex.value + 1 < countSlides.value.length) {
      countIndex.value++;
      contentUrl.value = countSlides.value[countIndex.value].content;
      console.log(contentUrl.value)
    }
  }
}

function wheel(e) {
  //捕捉数值,判断滚动方向  120为上 -120为下   嵌套判断是为了滑块不超出最大和最小值
  e.preventDefault();
  const direction = Math.sign(e.deltaY);
  console.log(direction)
  if (direction == -1) {
    if (scale.value.value < 10) {
      scale.value.value += 0.1
    }
  } else {
    if (scale.value.value > 0) {
      scale.value.value -= 0.1
    }
  }
}

function definiteAllocation(){
  triage.allotCase(caseList.value).then(res =>{
    tableSuccessTips(res)
    dialogVisible.value = false;
  })
}

function tableSuccessTips(res){
  if (res.code == 200){
    ElMessage({
      message: res.msg,
      type: 'success',
    })
    getTbd();
  }else if (res.code == 500){
    ElMessage.error(res.msg)
  }
}

getPathology();
getApplayForHospital();
getTbd();
</script>

<style scoped>
#span-right {
  padding-right: 20px;
}

.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped
.el-table__row--striped td {
  background-color: #eaf3fb;
}
</style>